var musicControlsLoop = document.getElementById("music-controls-loop"),
    musicControlsPlay = document.getElementById('music-controls-play'), // 播放按钮
    musicControlsPrev = document.getElementById('music-controls-prev'), // 上一曲
    musicControlsNext = document.getElementById('music-controls-next'), // 下一曲
    musicControlsVolumeOff = document.getElementById("music-controls-volume-off"), // 静音
    musicVolume = document.getElementById('music-volume'), // 音量调节
    musicBar = document.getElementById('music-bar'), // 播放进度控制
    musicPlayedBar = document.getElementById('music-played-bar'), // 已播放进度条
    // voicedBar = document.getElementById('voiced-bar'), // 已播放进度条
    musicCoverTitle = document.getElementById('music-cover-title'), // 音乐标题
    musicCoverSinger = document.getElementById("music-cover-singer"),
    musicCoverImg = document.getElementById('music-cover-img'), // 音乐封面;

    // loadBar = document.getElementById('load-bar'), // 加载进度条
    musicCurrentTime = document.getElementById('music-current-time'), // 当前音乐时间
    musicTotalTime = document.getElementById('music-total-time'); // 当前音乐时间
// 是否循环播放
musicAudio.loop = false;
// 是否自动播放
musicAudio.autoplay = false;
// 初始化音量
musicAudio.volume = 0.5;
// 是否自动缓冲加载
musicAudio.autobuffer = false;

// 播放&暂停 控制
musicControlsPlay.onclick = function () {
    if (musicAudio.paused) {
        musicAudio.play();
        this.getElementsByTagName("i")[0].innerHTML = "pause";
        // musicImg.style.animation = 'xuanzhuan 5s linear infinite';
    } else {
        musicAudio.pause();
        this.getElementsByTagName("i")[0].innerHTML = "play_arrow";
        // musicImg.removeAttribute('style');
    }
    musicTime();
};
// 计算音乐时间

function musicTime() {
    // 更换播放歌曲名称图片及歌手名称
    musicCoverTitle.innerHTML = musicAudioSource.getAttribute("title");
    musicCoverSinger.innerHTML = musicAudioSource.getAttribute("data-singer");
    musicCoverImg.setAttribute("src",musicAudioSource.getAttribute("data-img"));
    // 播放时间显示
    var sc=musicAudio.duration;
    console.log(sc);
    // console.log("123456"+ sc);
    var min = parseInt(sc / 60);
    var sec = parseInt(sc % 60);
    if (sec < 10) {
        musicTotalTime.innerHTML = min + ":0" + sec;
    }else {
        musicTotalTime.innerHTML = min + ":" + sec;
    }
}
// 是否单曲循环
musicControlsLoop.onclick = function () {
    if (musicAudio.loop) {
        musicAudio.loop = false;
        this.innerHTML = "循环";
    } else {
        musicAudio.loop = true;
        this.innerHTML = "单曲";
    }
};

// 播放进度实时更新
setInterval(function updatePlayedBar (){
    // var musicBarWidth = musicBar.clientWidth;
    // var playedBarWidth = (audio.currentTime / audio.duration) * musicBarWidth;
    var percent = musicAudio.currentTime / musicAudio.duration * 100;
    // console.log(percent);
    musicPlayedBar.style.width = percent + "%";
    if (musicAudio.currentTime % 60 < 10) {
        musicCurrentTime.innerHTML = parseInt(musicAudio.currentTime / 60) + ":0" + parseInt(musicAudio.currentTime % 60);
    } else {
        musicCurrentTime.innerHTML = parseInt(musicAudio.currentTime / 60) + ":" + parseInt(musicAudio.currentTime % 60);
    }
    //如果是时间结束，并且是非单曲循环，自动下一曲
    if (musicAudio.currentTime === musicAudio.duration && !musicAudio.loop) {
        // next.onclick();
    }
}, 1000);

// 播放进度控制
musicBar.onclick = function (event) {
    var musicBarWidth = musicBar.clientWidth;
    var newCurrentTime = (event.offsetX / musicBarWidth) * musicAudio.duration;
    musicAudio.currentTime = newCurrentTime;
    // var playedBarWidth = (audio.currentTime / audio.duration) * musicBarWidth;
    musicPlayedBar.style.width = musicAudio.currentTime / musicAudio.duration *100 + "%";
};

// 音量调节
musicVolume.onchange = function (event) {
    musicAudio.volume = (musicVolume.value / 100);
};
